<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>顾客列表 - 餐厅管理系统</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { 
            font-family: 'Segoe UI', 'Microsoft YaHei', Arial, sans-serif; 
            background: #f8fafc;
            min-height: 100vh;
        }
        .container { max-width: 1400px; margin: 0 auto; padding: 24px; }
        
        .header { 
            background: white;
            padding: 32px;
            border-radius: 12px;
            margin-bottom: 24px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .header h1 { 
            font-size: 28px;
            color: #1e293b;
            margin-bottom: 8px;
            font-weight: 600;
        }
        .header p {
            color: #64748b;
            font-size: 14px;
        }
        
        .nav { 
            background: white;
            padding: 16px 24px;
            border-radius: 12px;
            margin-bottom: 24px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .nav a { 
            text-decoration: none;
            color: #64748b;
            margin-right: 24px;
            font-weight: 500;
            font-size: 14px;
            transition: color 0.3s;
        }
        .nav a:hover { color: #2563eb; }
        
        .action-bar { 
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
            padding: 20px 24px;
            border-radius: 12px;
            margin-bottom: 20px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .action-bar h2 {
            color: #1e293b;
            font-size: 20px;
            font-weight: 600;
        }
        
        .btn { 
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s;
            margin-left: 8px;
        }
        .btn-primary { 
            background: #2563eb;
            color: white;
        }
        .btn-primary:hover { 
            background: #1d4ed8;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(37,99,235,0.3);
        }
        .btn-info { 
            background: #0ea5e9;
            color: white;
            font-size: 13px;
            padding: 8px 16px;
        }
        .btn-info:hover { background: #0284c7; }
        
        .btn-warning { 
            background: #f59e0b;
            color: white;
            font-size: 13px;
            padding: 8px 16px;
        }
        .btn-warning:hover { background: #d97706; }
        
        .btn-danger { 
            background: #ef4444;
            color: white;
            font-size: 13px;
            padding: 8px 16px;
        }
        .btn-danger:hover { background: #dc2626; }
        
        .alert-error {
            background: #fef2f2;
            border: 1px solid #fecaca;
            padding: 16px;
            border-radius: 8px;
            margin-bottom: 20px;
            color: #991b1b;
        }
        .alert-error strong {
            font-weight: 600;
        }
        
        table { 
            width: 100%;
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            border-collapse: collapse;
        }
        th { 
            background: #f1f5f9;
            color: #475569;
            padding: 16px;
            text-align: left;
            font-weight: 600;
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        td { 
            padding: 16px;
            border-bottom: 1px solid #f1f5f9;
            color: #1e293b;
            font-size: 14px;
        }
        tr:last-child td { border-bottom: none; }
        tbody tr:hover { background: #f8fafc; }
        
        .empty { 
            text-align: center;
            padding: 80px 20px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .empty p:first-child {
            font-size: 48px;
            margin-bottom: 16px;
        }
        .empty p {
            color: #64748b;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>👥 顾客管理</h1>
            <p>管理顾客信息、查看订单历史</p>
        </div>

        <div class="nav">
            <a th:href="@{/}">🏠 首页</a>
            <a th:href="@{/customers/list}" style="color: #2563eb;">👥 顾客管理</a>
            <a th:href="@{/menuitems/list}">🍽️ 菜单管理</a>
            <a th:href="@{/orders/list}">📋 订单管理</a>
            <a th:href="@{/orderdetails/list}">📝 订单详情</a>
        </div>

        <div class="action-bar">
            <h2>顾客列表</h2>
            <a th:href="@{/customers/add}" class="btn btn-primary">➕ 添加顾客</a>
        </div>

        <div th:if="${error}" class="alert-error">
            <strong>⚠️ 错误：</strong> <span th:text="${error}"></span>
        </div>

        <table th:if="${!customers.isEmpty()}">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>电话</th>
                    <th>邮箱</th>
                    <th style="text-align: right;">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr th:each="customer : ${customers}">
                    <td th:text="${customer.id}"></td>
                    <td th:text="${customer.name}" style="font-weight: 500;"></td>
                    <td th:text="${customer.phone}"></td>
                    <td th:text="${customer.email}"></td>
                    <td style="text-align: right;">
                        <a th:href="@{/customers/detail/{id}(id=${customer.id})}" class="btn btn-info">👁️ 查看</a>
                        <a th:href="@{/customers/edit/{id}(id=${customer.id})}" class="btn btn-warning">✏️ 编辑</a>
                        <a th:href="@{/customers/delete/{id}(id=${customer.id})}" 
                           class="btn btn-danger" 
                           onclick="return confirm('确定要删除该顾客吗？')">🗑️ 删除</a>
                    </td>
                </tr>
            </tbody>
        </table>

        <div class="empty" th:if="${customers.isEmpty()}">
            <p>😢</p>
            <p>暂无顾客数据</p>
            <p style="margin-top: 24px;"><a th:href="@{/customers/add}" class="btn btn-primary">立即添加</a></p>
        </div>
    </div>
</body>
</html>
